<style scoped lang="less"></style>
<template>
  <div class="inner">
    <Map @alarm="alarmAction"></Map>
    <el-container class="page-iot-container" direction="vertical">
      <iotHeader :type="type"></iotHeader>
      <el-container v-if="dataObj">
        <el-main class="iot-main">
          <div class="iot-left">
            <Today :type="type" :data="dataObj.todayAlarm"></Today>
            <Week
              ref="week"
              class="mt-30"
              :type="type"
              :data="dataObj.weekAlarmList"
            ></Week>
            <Unit
              ref="unit"
              class="mt-30"
              :type="type"
              :data="dataObj.businessCount"
            ></Unit>
          </div>
          <div class="iot-right">
            <Device
              :type="type"
              :data="dataObj.todayDeviceCountByState"
            ></Device>
            <Company
              ref="company"
              class="mt-30"
              :type="type"
              :data="dataObj.alarmBusinessAnalysisList"
            ></Company>
            <Type
              ref="type"
              class="mt-30"
              :type="type"
              :data="dataObj.todayDeviceCountByState"
              v-if="
                type == 'fireControl' ||
                  type == 'extinguisher' ||
                  type == 'pool' ||
                  type == 'auto' ||
                  type == 'waterPump'
              "
            ></Type>
            <Type
              ref="type"
              class="mt-30"
              :type="type"
              :data="dataObj.percentage"
              v-else
            ></Type>
          </div>
          <div class="iot-bottom">
            <Realtime ref="realtime" :type="type"></Realtime>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { mapState } from "vuex";
import iotHeader from "@/components/iot/IOTHeader.vue";
import Map from "@/components/iot/Map.vue";
import Today from "@/components/iot/Today.vue";
import Week from "@/components/iot/Week.vue";
import Unit from "@/components/iot/Unit.vue";
import Device from "@/components/iot/Device.vue";
import Company from "@/components/iot/Company.vue";
import Type from "@/components/iot/Type.vue";
import Realtime from "@/components/iot/Realtime.vue";
import CompanyDevice from "@/components/iot/CompanyDevice.vue";
export default {
  name: "Home",
  props: ["winH", "type"],
  data() {
    return {
      dataObj: null,
      loading: false,
    };
  },
  components: {
    iotHeader,
    Map,
    Today,
    Week,
    Unit,
    Device,
    Company,
    Type,
    Realtime,
    CompanyDevice,
  },
  watch: {
    $route(to, from) {},
  },
  computed: {
    ...mapState(["scale", "siteInfos"]),
    isCompanyAndPool() {
      return this.siteInfos.userType == 2 && this.type == "pool";
    },
  },
  methods: {
    getData() {
      // this.openFullLoading()
      let url = "";
      switch (this.type) {
        case "pool":
          url = "/firewater/firewater/getHomePageData";
          break;
        case "smoke":
          url = "/independentsmoke/independentsmoke/getHomePageData";
          break;
        case "monitor":
          url =
            "/firefightingvisualization/firefightingvisualization/getHomePageData";
          break;
        case "fire":
          url = "/electricfire/electricfire/getHomePageData";
          break;
        case "chargingStation":
          url = "/chargingStation/chargingStation/getHomePageData";
          break;
        case "gas":
          url = "/combustiblegas/combustiblegas/getHomePageData";
          break;
        case "fireControl":
          url = "/fireFightingIOT/fireFightingIOT/getHomePageData";
          break;
        case "extinguisher":
          url = "/fireExtinguisher/fireExtinguisher/getHomePageData";
          break;
        case "auto":
          url = "/autoNet/autoNet/getHomePageData";
          break;
        case "waterPump":
          url = "/waterPump/waterPump/getHomePageData";
          break;
      }
      if (!url) return;
      this.$get(url, {
        nums: 5,
        type: 1,
        userType: this.siteInfos.userType,
      }).then(
        (res) => {
          // this.closeFullLoading()
          this.dataObj = res.data;
        },
        (err) => {
          // this.closeFullLoading()
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    alarmAction() {
      this.getData();
      if (this.$refs.realtime) {
        this.$refs.realtime.getData();
      }
    },
  },
  created() {
    this.getData();
  },
  activated() {},
  mounted() {
    //
  },
};
</script>
